<!DOCTYPE HTML>
<html>
<head>
	<title>Find Secret</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/m-x.js"></script>
	<script type="text/javascript" src="js/panorama.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript" src="jqtouch/jquery.
1.3.2.min.js" type="application/x-javascript"
charset="utf-8"></script>

<script type="text/javascript" src="jqtouch/jqtouch.min.js"
type="application/x-javascript" charset="utf-8"></script>

<script type="text/javascript" src="js/bird.js"></script>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>

<body>
<header>
</header>
<section>
</section>	
	
	<div id="dimgOuter" class="imageDivOuter" name="dimgOuter">
	<div id="dimg" class="imageDiv" name="dimg">
		<TABLE border=0 cellPadding=0 cellSpacing=0>
		<!-- THE 360 DEGREE IMAGE BELOW (DO NOT FORCE SIZE) -->
		<!-- be sure to change src in BOTH  images -->
		  <TR>
			<TD><img id="ione" name="ione" src="images/PIV.jpg" border="0" /></TD>
			 
			<TD><img id="itwo" name="itwo" src="images/PIV.jpg" border="0" /></TD> 	
			<div id="character">
		<img id="bird1" src="images/birdRight.gif" />
		<img id="bird2" src="images/birdLeft.gif" class="hideMe"/>
		</div><!--/character-->
	
		 
			</TR>
		</TABLE>
	</div><!--/dimg-->
	
	<!--UGH to do: get rid of tables!-->
	
	</div><!--/dimgouter-->

	
	<div id='nowloading' class='nowLoading'><!--loading msg-->
		<p>Loading...</p>         
	</div><!--/nowloading-->
	

	<div id='PlaceHolderDiv' class='placeHolder'></div><!--/placeholder that images go in-->

<!-- secret #3-->
	<div id="secret">
		<h3>You Collected a secret!</h3>
		<p>One of the unique sounds in the rainforest symphony is the sounds of the macaws. Click the 
play button below to hear it!</p>

		<div class="asset"><audio src="audio/parrots.mp3" controls="controls">
			Your browser does not support the audio element.
			</audio></div>
		<p><a href="fly-into-book-3.html"rel="external">Continue</a></p>
		
		
	</div><!--/secret-->

	<ul id="coordinates"> <!--devicemotion write coordinates-->
		<li>acceleration x: <span id="accelerationX">device does not detect</span></li> 
		<li>acceleration y: <span id="accelerationY">device does not detect</span></li> 
		<li>acceleration z: <span id="accelerationZ">device does not detect</span></li> 
		<li>rotation alpha: <span id="rotationAlpha">device does not detect</span></li> 
		<li>rotation beta: <span id="rotationBeta">device does not detect</span></li> 
		<li>rotation gamma: <span id="rotationGamma">device does not detect</span></li> 
	</ul><!--/coordinates-->
	

<footer>
</footer>
</body>

</html>